{{extend name="index/index" /}}

{{block name="main"}}
<!--main content start-->
<section id="main-content">
    <section class="wrapper">
        <!-- page start-->
        <div class="row">
            <div class="col-lg-12">
                <section class="panel">
                    <header class="panel-heading">
                        礼物列表
                    </header>
                    <form method="get" action="{{:url('admin/gift/index')}}">
                        <span>搜索：</span>
                        <input type="text" name="search" value="" class="text-word">
                        <input type="submit" value="查询" class="text-but">
                    </form>
                    <table class="table table-striped border-top table-advance" id="sample_1">
                        <thead>
                        <tr>
                            <th>礼物ID</th>
                            <th class="hidden-phone">礼物名</th>
                            <th class="hidden-phone">礼物价格</th>
                            <th class="hidden-phone">礼物图标</th>
                            <th class="hidden-phone">状态</th>
                            <th class="hidden-phone">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {{volist name="list" id="v"}}
                        <tr class="odd gradeX">
                            <td>{{$v['id']}}</td>
                            <td class="hidden-phone">{{$v['name']}}</td>
                            <td class="hidden-phone">{{$v['price']}}</td>
                            <td class="center hidden-phone"><img src="/uploads/{{$v['icon']}}" width="30"></td>
                            <td class="center hidden-phone">{{$v['status']=='0'?'正常':'禁用'}}</td>
                            <td class="hidden-phone">
                                <a class="btn-sm btn btn-round btn-info edit-btn-s" data-toggle="modal" href="#myModal"
                                   data-id="{{$v['id']}}" data-name="{{$v['name']}}" data-price="{{$v['price']}}"
                                   data-icon="{{$v['icon']}}">
                                    修改礼物信息
                                </a>
                                <a class="btn-sm btn btn-round btn-danger del-btn-s" data-toggle="modal"
                                   href="#myModal2" data-id="{{$v['id']}}">
                                    删除
                                </a>
                                <a data-id="{{$v['id']}}" data-status="{{$v['status']}}"
                                   class="btn-sm btn btn-round btn-warning ban-btn-s" data-toggle="modal"
                                   href="#myModal3">
                                    禁用/解禁
                                </a>
                            </td>
                        </tr>
                        {{/volist}}
                        </tbody>
                    </table>
                    {{$list->render()}}
                </section>
            </div>
        </div>
        <!-- page end-->

        <!--modal start-->
        <section class="panel">
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">编辑礼物信息</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="inputEmail1" class="col-lg-2 control-label">礼物名</label>
                                    <div class="col-lg-10">
                                        <input type="email" class="form-control" placeholder="" id="pname" name="pname">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail1" class="col-lg-2 control-label">礼物价格</label>
                                    <div class="col-lg-10">
                                        <input type="email" class="form-control" placeholder="" id="pprice"
                                               name="pprice">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail1" class="col-lg-2 control-label">礼物图标</label>
                                    <div class="col-lg-5">
                                        <label for="inputFile">
                                            <img src="" width="80" class="img-rounded .img-responsive" id="picon"
                                                 name="picon">
                                            <p>点击更换图标</p>
                                        </label>
                                    </div>
                                    <div class="col-lg-1" style="display: none">
                                        <input type="file" id="inputFile" class="btn btn-primary"
                                               name="pic">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                    <button data-dismiss="modal" class="btn btn-success edit-btn" type="button">保存
                                    </button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
            <!-- modal -->
            <!-- Modal -->
            <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">删除礼物</h4>
                        </div>
                        <div class="modal-body">
                            确认要删除吗?
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                            <button data-dismiss="modal" class="btn btn-danger del-btn" type="button">删除</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- modal -->
            <!-- Modal -->
            <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">禁用/解禁</h4>
                        </div>
                        <div class="modal-body">
                            确定吗?
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                            <button data-dismiss="modal" class="btn btn-danger ban-btn" type="button">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- modal -->

        </section>
        <!--modal start-->
    </section>
</section>

<!--main content end-->
{{/block}}

{{block name="myjs"}}
<script>
    // 设置弹框参数
    toastr.options = {
        closeButton: true,//是否显示关闭按钮
        progressBar: true,//实现显示计时条
        timeOut: "3000",//自动关闭时间
        positionClass: "toast-bottom-left"//提示位置
        // toast-top-full-width 顶端，宽度铺满整个屏幕
//    toast-top-right  顶端右边
    };

    $(function () {
        // 点击删除按钮
        $('.del-btn-s').click(function () {
            del_id = $(this).attr('data-id');
            del_obj = $(this).parents('tr');
        })
        // 触发删除用户操作
        $('.del-btn').click(function () {
            // 要删除的行
            delAjax(del_id, del_obj);
        });

        // 点击修改按钮
        $('.edit-btn-s').click(function () {
            edit_id = $(this).attr('data-id');
            edit_name = $(this).attr('data-name');
            edit_price = $(this).attr('data-price');
            edit_icon = $(this).attr('data-icon');
            edit_obj = $(this).parents('tr');
            $('#pname').val(edit_name);
            $('#pprice').val(edit_price);
            $('#picon').attr('src', 'uploads/' + edit_icon);
        });

        // 点击提交修改按钮
        $('.edit-btn').click(function () {
            var data = $('.form-horizontal input').serialize();
            if ($('#inputFile').attr('data-icon')) {
                var pic = $('#inputFile').attr('data-icon');
                var num = pic.indexOf('/');
            } else {
                var pic = $('#picon').attr('src');
                var num = pic.indexOf('/');
            }
            pic = pic.substr(num + 1);
            data = data + '&picon=' + pic + '&id=' + edit_id;
            console.log(data);
            $.ajax({
                type: 'put',
                url: 'gift/update',
                data: data,
                success: function (data) {
//                    console.log(data);
//                    console.log($(edit_obj).children('td').eq(3));
                    $(edit_obj).children('td').eq(1).html(data.name);
                    $(edit_obj).children('td').eq(2).html(data.price);
                    $(edit_obj).children('td').eq(3).children('img').eq(0).attr('src', 'uploads/' + data.icon);
                    $('.edit-btn-s').attr('data-name', data.name);
                    $('.edit-btn-s').attr('data-price', data.price);
                    $('.edit-btn-s').attr('data-icon', data.icon);
                },
                error: function () {
                    toastr.error('编辑失败');
                }
            });
        });

        // 上传图标
        $('#inputFile').on("change", function () {
            //为文件上传添加change事件
            var fileM = document.querySelector("#inputFile");
            //获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组
            var fileObj = fileM.files[0];
            //创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。
            var formData = new FormData();
            formData.append('file', fileObj);

            $.ajax({
                type: 'post',
                url: '/gift/pic',
                data: formData,
                // cache: false,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function (data) {
                    if (data) {
//                        console.log(data);
//                        toastr.success('成功');
                        var path = "uploads/" + data;
                        $('#picon').attr('src', path);
                        $("#inputFile").attr('data-icon', data);
                    } else {
                        // toastr.warning('未选择头像');
                    }
                },
                error: function () {
                    toastr.error('图片尺寸太大,请选择小点的');
                }
            });
        });

        // 点击禁用/解禁按钮
        $('.ban-btn-s').click(function () {
            ban_id = $(this).attr('data-id');
            ban_status = $(this).attr('data-status');
            ban_obj = $(this).parents('tr');

        });
        // 点击确定禁用/解禁按钮
        $('.ban-btn').click(function () {
            $.ajax({
                type: 'post',
                url: '/gift/ban',
                data: {
                    'id': ban_id,
                    'status': ban_status
                },
                dataType: 'json',
                success: function (data) {
                    toastr.success('成功!');
                    $(ban_obj).children('td').eq(4).html(data.status == '0' ? '正常' : '禁用');
                    $('.ban-btn-s').attr('data-status', data.status);
                },
                error: function () {
                    toastr.error('失败!');
                }
            });
        })

    });


    function delAjax(id, obj) {
        $.ajax({
            type: 'delete',
            url: '/gift/' + id,
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    toastr.success(data.info);
                    // 将该行删除
                    obj.remove();

                } else {
                    toastr.error('删除失败');
                }
            },
            error: function () {
                toastr.error('删除失败');
            }
        });
    }


</script>
{{/block}}